<template>
    <div>
        <template v-for="item in menuItems">
            <!-- 如果是菜单项（没有子菜单） -->
            <el-menu-item v-if="item.type === 'item'" :key="item.index" :index="item.index">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>

            <!-- 如果是子菜单（有子菜单） -->
            <el-submenu v-else :key="item.index" :index="item.index">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title" v-show="collapse">{{ item.label }}</span>
                </template>
                <!-- 递归调用自身，传入子菜单数据 -->
                <recursive-menu :menu-items="item.children" />
            </el-submenu>
        </template>
    </div>
</template>

<script>
export default {
    name: 'RecursiveMenu', // 组件必须要有 name，递归时才会生效
    props: {
        menuItems: {
            type: Array,
            // required: true
        },
        collapse: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            // isShow: false
        }
    },

}
</script>